

import {Icon,Modal ,Input,Spin} from 'antd';
import React from 'react';
import CryptoJS from "crypto-js";
import Markdown from 'react-markdown';

class JsPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            key:'',
            disVisible: true,  //不显示
            window: false ,// 弹框
        }
        if(props.location.search){
            const key = props.location.search.substring(1);
            if(key && key =='show'){
                this.state.window = true ;
            }
        }
    }


    handleOk0 = (e) => {
        if(this.state.key){
            const word =  "U2FsdGVkX1/QLZQYig/1DpXDqTtk6i7JjnmkJcC+Is0=";
            try{
                let bytes  = CryptoJS.AES.decrypt(word,this.state.key);
                let right_pass = bytes.toString(CryptoJS.enc.Utf8);
                if(right_pass){
                    this.setState({
                        disVisible: false , //显示
                        window:false,
                    });
                }else {
                    this.showNothing();
                }
            }catch (e) {
                this.showNothing();
            }

        }else{
            this.showNothing();
        }
    }


    showNothing = () => {
        this.setState({
            disVisible: true,
            window:false,
        });
    }

    onChangeUserName = (e) => {
        this.setState({ key: e.target.value });
    }

    handleCancel = (e) => {
        this.setState({
            disVisible: true,
            window:false,
        });
    }

    render() {
        const suffix = key ? <Icon type="close-circle" onClick={this.emitEmpty} /> : null;
        const {key} = this.state;

        return (
                <div>
                    <Modal
                        visible={this.state.window}
                        onOk={this.handleOk0}
                        onCancel={this.handleCancel}>
                        <img src={require('../../imgs/forbid.png' )}  style={{height:"100%",width:"100%",marginBottom:"10px"}}/>
                        <Input
                            placeholder="请输入通行码!"
                            prefix={<Icon type="question-circle-o" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            suffix={suffix}
                            value={key}
                            type="password"
                            onChange={this.onChangeUserName}
                            ref={node => this.keyInput = node}
                        />
                    </Modal>






                    {this.state.disVisible ?
                        <div>
                            <Spin size="large">系统检测到你不是亲爱的xian,请给xian发红包才可以浏览</Spin>
                        </div>

                        :
                        <div>
                            <Markdown source={"6.8-1 = 5.8 \n\n 37.5 + 16+ 18 -60 -4.3= 7.2"}/>
                        </div>
                    }
                </div>


        );
    }
}

export default JsPage;